<template>
  <div class="header">
    <div class="logo">
      <img src="../assets/img/logo2.png" alt="Logo" />
    </div>
    <div class="actions">
      <!-- <div class="actiontitle">{{ portalName }}</div> -->
      <!-- <div class="actionsChange">
        <span @click="portalCut"><img src="../assets/img/change.png" alt="" />门户切换</span>
      </div> -->
      <el-radio-group v-model="portalName" @input="inputPortal">
        <el-radio-button label="公司门户"></el-radio-button>
        <el-radio-button label="个人门户"></el-radio-button>
      </el-radio-group>
      <div class="actiontitleAvt">
        <el-avatar :src="circleUrl"></el-avatar>
      </div>
      <div class="actionsHy">欢迎你，<span>{{ userName }}</span></div>
      <el-badge :value="messageNumber" :max="99" class="item" :hidden="messageNumber == 0 || portalName != '个人门户'">
        <div class="actions-message" @click="actionsMessage" v-if="portalName == '个人门户'">
          <i class="el-icon-bell"></i>
        </div>
      </el-badge>

      <div class="actionslogout" @click="QuitPortal">
        <img src="../assets/img/logout.png" alt="Action 1" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  getPersonal,
  getPortalCut,
  getQuitPortal,
  getMessageNumber
} from '@/api/index'
import { EventBus } from './event-bus.js'
export default {
  name: "Header",
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

      sizeList: ["large", "medium", "small"],
      userName: '',
      portalName: '',
      radioPortal: '',
      shouldGetPersonal: true,
      messageNumber: '',
      messageUrl: ''
    };
  },
  computed: {},
  created() {
    const _this = this;
    _this.sid = _this._sid;
    console.log(">>>>>>>>>>>>>>>>>>>>>>>sid" + sid);
  },
  mounted() {
    if (this.shouldGetPersonal) {
      this.getPersonal();
    }
    this.getMessageNumber();
  },
  methods: {
    inputPortal(value) {
      console.log(value)
      const _this = this;
      let cut;
      _this.portalName = value;
      if (value == '个人门户') {
        cut = 'person';
        this.$store.commit('resetMessageStore')
        _this.$router.push('/my-home');
      } else {
        cut = 'group';
        _this.$router.push('/company-home');
      }

      getPortalCut(_this.sid, cut)
        .then(response => {
          console.log(response, '门户已经切换!!!!')
        })
        .catch(error => {
          console.error('门户切换失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取个人信息
    getPersonal() {
      const _this = this;
      getPersonal(_this.sid)
        .then(response => {
          _this.circleUrl = response.data.userPhoto;
          _this.userName = response.data.userName;
          console.log(response.data.portalType, 'portalType')
          if (response.data.portalType == 'person') {
            _this.$router.push('/my-home', () => { }, () => { });
            _this.portalName = '个人门户';
          } else {
            _this.$router.push('/company-home', () => { }, () => { });
            _this.portalName = '公司门户';
          }
          _this.shouldGetPersonal = false;
        })
        .catch(error => {
          console.error('获取个人信息失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取消息数量
    getMessageNumber() {
      const _this = this;
      getMessageNumber(_this.sid)
        .then(response => {
          _this.messageNumber = response.data.num;
          _this.messageUrl = response.data.url;
        })
        .catch(error => {
          console.error('获取消息数量失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    actionsMessage() {
      EventBus.$emit('messageURL', this.messageUrl);
    },
    portalCut() {
      // 门户切换
      const _this = this;
      let cut;
      if (_this.$route.path == '/company-home') {
        cut = 'person';
        _this.portalName = '个人门户';
        _this.$router.push('/my-home');
      } else {
        cut = 'group';
        _this.portalName = '公司门户';
        _this.$router.push('/company-home');
      }

      getPortalCut(_this.sid, cut)
        .then(response => {
          console.log(response, '门户已经切换!!!!')
        })
        .catch(error => {
          console.error('门户切换失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    QuitPortal() {
      this.$confirm('此操作将退出门户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getQuitPortal(this.sid)
          .then(response => {
            this.$message({
              type: 'success',
              message: '门户已退出!'
            });
            console.log(window.portalUrl,'window.portalUrl')
            window.location.href = window.portalUrl;
          })
          .catch(error => {
            console.error('门户退出失败', error);
            if (error.response && error.response.data && error.response.data.errorCode === '400') {
              console.error(error.response.data.msg);
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1rem;
  padding: 0 0.46875rem;
  background: #ffffff;
  box-shadow: 0px 0.046875rem 0.048125rem 0px rgba(7, 0, 2, 0.05);

  .logo {
    width: 3.265625rem;
    height: 0.625rem;
    line-height: 0;
    font-size: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .actions {
    display: flex;
    align-items: center;

    ::v-deep .el-radio-group {
      margin-right: 0.4rem;

      .el-radio-button {
        .el-radio-button__inner {
          border: none;
          border-radius: 5px;
        }

      }

      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: #2c64df;
        box-shadow: -1px 0 0 0 #2c64df;
      }
    }

    .actiontitleAvt {
      margin-right: 0.09375rem;
      font-size: 0;

      .el-avatar {
        width: 0.546875rem;
        height: 0.546875rem;
      }
    }

    .actionsHy {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 0.21875rem;
      color: #333333;
      margin-right: 0.21875rem;
    }

    .actionslogout {
      width: 0.546875rem;
      height: 0.546875rem;
      font-size: 0;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }

    ::v-deep .el-badge {
      margin-right: 0.15625rem;

      .actions-message {
        width: 0.4rem;
        height: 0.4rem;
        align-items: center;
        display: flex;
        justify-content: center;
        border-radius: 15px;
        box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.1);
        cursor: pointer;

        i {
          font-size: 0.2846875rem;
        }

      }

      .el-badge__content {
        height: 0.1875rem;
        line-height: 0.1875rem;
        padding: 0 0.046875rem;
        font-size: 0.15625rem;
      }

      .el-badge__content.is-fixed {
        right: 0.15625rem;
        top: 0.03125rem;
      }
    }

  }
}
</style>
